<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
	    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	    <meta name="HandheldFriendly" content="true">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/reset.css"/>
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
		<link rel="stylesheet" type="text/css" href="css/jquery-ui-1.8.16.custom.css"/>
	</head>
	<body>
		<div class="qh-container">
			<div class="pub-box">
				<div class="pub-content" style="display: block;">
					<div class="pub-park">
						<span>余额60</span><span class="ml30">持仓盈亏 <font class="pub-redcolor funding">600元</font></span>
					</div>
					<div class="pub-tab-menu clearfix">
						<ul>
							<li class="pub-cur"><a href="#">下单</a></li>
							<li><a href="#">持仓</a></li>
							<li><a href="#">结算</a></li>
						</ul>
						<div class="pub-tab-content">
							<!--下单-->
							<div class="pub-order-list">
								<div class="order-list-gro clearfix">
									<dl class="stock-data clearfix">
										<dd class="stock-title">恒生期权</dd>
										<dd class="stock-fund">20565.22</dd>
										<dd class="stock-pool">
											<div class="plus">+261.00</div>
											<div class="minus">+1.296%</div>
										</dd>
									</dl>
									<div class="stock-sale clearfix">
										<span class="text-left">卖价  &nbsp;&nbsp;&nbsp;  <em class="offer">20566.00</em></span>
										<span class="text-right">买价  &nbsp;&nbsp;&nbsp;  <em class="buying">10287.00</em></span>
									</div>
								</div>
								<div class="trend-chart">
									<img src="images/icon_01.png" width="100%"/>
								</div>
								<!--看涨看跌按钮-->
								<div class="order-action">
									<span class="action-left"><a href="#see-up" class="btn-left">看涨</a></span>
									<span class="action-right"><a href="#see-down" class="btn-right">看跌</a></span>
								</div>
							</div>
							<!--持仓-->
							<div class="pub-order-list"  style="display: none;">
								<div class="order-list-gro clearfix">
									<p class="pub-title"><span class="title-name">恒生期权（HSI1603)</span><span class="title-date">开仓16-03-16  10:07:03</span></p>
									<div class="order-square clearfix" id="progress1">
										<dl>
											<dd>
												<div class="square-info">
													<p>看跌</p>
													<p>金额100元</p>
													<p>收益70%  </p>
													<p>剩余
														<div class="elapsed"></div>
													</p>
												</div>
											</dd>
											<dd>
												<div class="square-profit">
													<p>盈亏1.60元</p>
													<p>执行价2000</p>
													<p>当前价2000</p>
													<p>
														<div class="percent"></div>
									        			<div class="pbar"></div>
													</p>
												</div>
											</dd>
											<dd>
												<a href="#" class="square-btn-doing">进行中</a>
											</dd>
										</dl>
									</div>
								</div>
								<div class="order-list-gro clearfix">
									<p class="pub-title"><span class="title-name">恒生期权（HSI1603)</span><span class="title-date">开仓16-03-16  10:07:03</span></p>
									<div class="order-square clearfix" id="progress2">
										<dl>
											<dd>
												<div class="square-info">
													<p>看跌</p>
													<p>金额100元</p>
													<p>收益70%  </p>
													<p>剩余
														<div class="elapsed pub-bluecolor"></div>
													</p>
												</div>
											</dd>
											<dd>
												<div class="square-profit">
													<p>盈亏1.60元</p>
													<p>执行价2000</p>
													<p>当前价2000</p>
													<p>
														<div class="percent"></div>
									        			<div class="pbar"></div>
													</p>
												</div>
											</dd>
											<dd>
												<a href="#" class="square-btn-doing">进行中</a>
											</dd>
										</dl>
									</div>
									
								</div>
							</div>
						
							<!--结算成功-->
							<div class="pub-order-list" style="display: none;">
								<div class="order-list-gro clearfix">
									<p class="pub-title"><span class="title-name">43恒生期权（HSI1603)</span><span class="title-date">开仓16-03-16  10:07:03</span></p>
									<div class="order-square clearfix">
										<dl>
											<dd>
												<div class="square-info">
													<p>看跌</p>
													<p>金额100元</p>
													<p>收益70%  </p>
													<p>剩余48秒  </p>
												</div>
											</dd>
											<dd>
												<div class="square-profit">
													<p>盈亏1.60元</p>
													<p>执行价2000.00</p>
													<p>当前价2000.00</p>
													<p>到期时间10:05:32</p>
												</div>
											</dd>
											<dd>
												<a href="#" class="square-btn">结算成功</a>
											</dd>
										</dl>
									</div>
								</div>

						</div>
					</div>

				</div>
				
			</div>
			<!--看涨-->
			<div id="see-up" style="display: none;">
				<ul class="main-list">
					<li>
						<div class="up-title">恒生期权-HSI1603 期权</div>
					</li>
					<li>
						<div class="up-title clearfix">
							<div class="list-left">到期时间</div>
							<div class="list-right timeshow">
								<span class="list-second list-checked">60秒</span>
								<span class="list-second">300秒</span>
								<span class="list-second">900秒</span>
								<a class="right-select"><img src="images/icon-02.png" width="100%"/></a>
								<div class="dialog-right" style="display: none;">
									<div class="dialog-content">
										<ul class="timeclick">
											<li data-value="60" data-index="0">60秒</li>
											<li data-value="300" data-index="1">300秒</li>
											<li data-value="900" data-index="2">900秒</li>
											<li data-value="1800" data-index="3">1800秒</li>
											<li data-value="3600" data-index="4">3600秒</li>
										</ul>
									</div>
								</div>
								
							</div>
						</div>
					</li>
					<li>	
						<div class="up-title">
							<div class="list-left">潜在收益率 <span class="pub-orangecolor" id="earn-rate">70%</span></div>
							<div class="list-right">
								潜在收益&nbsp;&nbsp;&nbsp;<span class="pub-orangecolor" id="earn">170元</span>
							</div>
						</div>
					</li>
					<li>
						<div class="up-title clearfix">
							<div class="list-left">投资金额</div>
							<div class="list-right2 mongyshow">
								<span class="list-second list-checked">100元</span>
								<span class="list-second">200元</span>
								<span class="list-second">500元</span>
								<a class="right-select2"><img src="images/icon-02.png" width="100%"/></a>
								<div class="dialog-right2" style="display: none;">
									<div class="dialog-content">
										<ul class="monyclick">
											<li data-value="100" data-index="0">100元</li>
											<li data-value="200" data-index="1">200元</li>
											<li data-value="500" data-index="2">500元</li>
											<li data-value="1000" data-index="3">1000元</li>
											<li data-value="2000" data-index="4">2000元</li>
											<li data-value="5000" data-index="5">5000元</li>
											<li data-value="10000" data-index="6">10000元</li>
										</ul>
									</div>
								</div>
							</div>
						</div>
					</li>
				</ul>
				<div class="main-execute">
					<div class="up-title">
						<span class="input-radio">●</span>及时执行（最新执行价20566.00）
					</div>

				</div>
				<div class="order-action">
					<span class="action-up"><a href="#" class="btn-up">确定看涨</a></span>
					<span class="action-down" style="display: none;"><a href="#" class="btn-down">确定看涨</a></span>
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
	<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
	<script type="text/javascript" src="js/myscript.js"></script>
	<script type="text/javascript">
	
		var jsondata = {"result":[
				{"stockfund":"20565.22","plus":"+261.00","minus":"+1.296%","offer":"20566.00","buying":"10287.00"},
	    		{"stockfund":"20561.00","plus":"+260.00","minus":"+1.295%","offer":"20565.00","buying":"10286.00"},
	    		{"stockfund":"20564.00","plus":"+264.00","minus":"+1.295%","offer":"28560.00","buying":"10281.00"},
	    		{"stockfund":"20560.00","plus":"+269.00","minus":"+0.290%","offer":"26561.00","buying":"10282.00"},
	    		{"stockfund":"20568.00","plus":"+265.00","minus":"+1.190%","offer":"25561.00","buying":"10283.00"},
	    		{"stockfund":"20565.00","plus":"+264.00","minus":"+1.390%","offer":"24561.00","buying":"10284.00"},
	    		{"stockfund":"10561.00","plus":"+263.00","minus":"+1.590%","offer":"22561.00","buying":"10285.00"},
	    		{"stockfund":"30560.00","plus":"+262.00","minus":"+1.690%","offer":"21561.00","buying":"10286.00"},
	    		{"stockfund":"40560.00","plus":"+160.00","minus":"+1.190%","offer":"10561.00","buying":"10287.00"}
    		]
    	}

		
		var i = 0;
		function refresh(){
			if(i >= jsondata.result.length){
				return;
			}
			/*取值*/
			var Ostockfund = jsondata.result[i].stockfund;
			var Oplus = jsondata.result[i].plus;
			var Ominus = jsondata.result[i].minus;
			var Ooffer = jsondata.result[i].offer;
			var Obuying = jsondata.result[i].buying;
			
			/*赋值*/
			$('.stock-fund').html(Ostockfund);
			$('.plus').html(Oplus);
			$('.minus').html(Ominus);
			$('.offer').html(Ooffer);
			$('.buying').html(Obuying);
			i++;
		}
	 		
    $(document).ready(function(){
    	var timer = setInterval(refresh, 500); 
    	
	$('.list-right span').click(function(){
	    var spanIndex = $(this).index();
	    $(this).addClass('list-checked').siblings('span').removeClass('list-checked');
		changeval(spanIndex);
	});
	function changeval(spanIndex){
		if(spanIndex == '0'){
			$('#earn-rate').html('70%');
			$('#earn').html('170元');
		}else if(spanIndex == '1'){
			$('#earn-rate').html('72%');
			$('#earn').html('172元');
		}else if(spanIndex == '2'){
			$('#earn-rate').html('75%');
			$('#earn').html('175元');
		}else if(spanIndex == '3'){
			$('#earn-rate').html('78%');
			$('#earn').html('178元');
		}else if(spanIndex == '4'){
			$('#earn-rate').html('80%');
			$('#earn').html('180元');
		}
	}
    
	//time click
	$('.timeclick').find('li').each(function(){
		$(this).click(function(){
			var val=$(this).html();
			var index=$(this).attr('data-index');
			if(index>2){
				$('.list-right').find('.list-second').remove();
				$('.timeshow').prepend('<span class="list-second list-checked">'+val+'</span>');
			}else{
				$('.timeshow').find('.list-second').eq(index).addClass('list-checked').siblings().removeClass('list-checked');
				//console.log('t/'+index);
			};
			$('.dialog-right').hide();
			changeval(index);
		})
	})
		//mony click
	$('.monyclick').find('li').each(function(){
		$(this).click(function(){
			var val=$(this).html();
			var index=$(this).attr('data-index');
			if(index>2){
				$('.mongyshow').find('.list-second').remove();
				$('.mongyshow').prepend('<span class="list-second list-checked">'+val+'</span>');
			}else{
				$('.mongyshow').find('.list-second').eq(index).addClass('list-checked').siblings().removeClass('list-checked');
			}
			$('.dialog-right2').hide();
		})
	})
  
    	$('.btn-left').click(function(){
    		$('.pub-content').hide();
    		$('#see-up').show();
    	});
    	$('.list-right2 span').click(function(){
    		$(this).addClass('list-checked').siblings('span').removeClass('list-checked');
    	});
    	
    	$('.list-right .right-select img').click(function(){
    		$('.dialog-right').show();
    	});
    	$('.list-right2 .right-select2 img').click(function(){
    		$('.dialog-right2').show();
    	});

        $('.pub-tab-menu ul li').click(function(){
            var index = $(this).index();
            $(this).addClass('pub-cur').siblings('li').removeClass('pub-cur');
            $('.pub-tab-content >.pub-order-list:eq('+ index +')').show().siblings().hide();
        })
        // 60秒
    $('#progress1').anim_progressbar();
    // 300秒
    var iNow = new Date().setTime(new Date().getTime() + 5 * 1000); //从第5分钟开始
    var iEnd = new Date().setTime(new Date().getTime() + 300 * 1000); //5分钟 300秒
    $('#progress2').anim_progressbar({start: iNow, finish: iEnd, interval: 100});
    
    //900秒
    var iNow2 = new Date().setTime(new Date().getTime() + 15 * 1000);
	var iEnd2 = new Date().setTime(new Date().getTime() + 900 * 1000);
	$('#progress3').anim_progressbar({start: iNow2, finish: iEnd2, interval: 100});
	//1800秒
	var iNow3 = new Date().setTime(new Date().getTime() + 30 * 1000);
	var iEnd3 = new Date().setTime(new Date().getTime() + 1800 * 1000);
	$('#progress4').anim_progressbar({start: iNow3, finish: iEnd3, interval: 100}); 
	
	//3600秒
	var iNow4 = new Date().setTime(new Date().getTime() + 60 * 1000);
	var iEnd4 = new Date().setTime(new Date().getTime() + 3600 * 1000);
	$('#progress5').anim_progressbar({start: iNow4, finish: iEnd4, interval: 100});
   

        
    });
</script>
</html>
